import React, { useEffect, useRef, useState } from 'react';
import { connect, history } from 'umi';
import { Alert, Button, Space, Tag, Modal, notification, Row, Col, Checkbox } from 'antd'
import TableDataBlock from '@/components/TableDataBlock';
import SearchCondition from '@/components/SearchCondition';
import ThirdTrace from '@/components/ThirdTrace';
import RenderCard from '@/components/RenderShopCard';
import PopImgShow from '@/components/PopImgShow';
import { Intention, yxkc, source, stage, workType_status, } from '@/common/contact';
import { uploadFile } from '@/utils/utils';
const PromoterList = (props) => {
    const { loading, dispatch, list, zm } = props;
    const { location } = history
    const { query, pathname } = location
    const { accessId, id } = query
    const childRef = useRef();
    const [intentionDirectionList, setintentionDirectionList] = useState([])
    const [params, setSearchParams] = useState({})
    const [selectedRow, setSelectedRow] = useState({
        selectedRowKeys: [],
        type: 'checked',
        preserveSelectedRowKeys: true,
        onChange: (val, selectedRows) => {
            setSelectedRow({
                ...selectedRow,
                selectedRowKeys: val,
                rowKeyList: selectedRows
            });
        },

    });
    const fetchUrl = () => {
        dispatch({
            type: 'promoter/fetchActivityUrl',
            callback: (e) => {
                const { activityUrl } = e
                setCodeVisible({
                    show: true,
                    detail: {
                        url: activityUrl
                    }
                })
            }
        })
    }
    const fakeExportPromoter = () => {
        dispatch({
            type: 'promoter/fakeExportSharePromoterUser',
            payload: {
                ...params,
                promoterId: id
            },
            callback: (e) => {
                const { url } = e
                uploadFile(url)
            }
        })

    }
    const fetchLevelList = () => {
        dispatch({
            type: 'promoter/fetchPromoterSimpleLevelDetail',
            callback: (e) => {
                const { promoterLevelList } = e
            }
        })
    }
    useEffect(() => { childRef.current.initData(); }, [params])
    useEffect(() => {
        dispatch({
            type: 'setting/fetchIntentionCourse',
            payload: {},
            callback: (e) => {
                const { intentionCourseList } = e
                setintentionDirectionList(intentionCourseList)
            }
        });
    }, [])
    // 搜索参数
    const searchItems = [

        {
            label: '客户',
            name: 'keyword',
        },
        {
            label: '推广员',
            name: 'promoterKeyword',
        },
        {
            label: '备案日期',
            type: 'rangePicker',
            name: 'createStartTime',
            end: 'createEndTime',
        },
        {
            label: '意向方向',
            name: 'intentionDirection',
            // mode: 'multiple',
            type: 'select',
            // rules: [{ required: false }],
            fieldNames: { label: 'courseName', value: 'id' },
            select: intentionDirectionList,
        },
        {
            label: '类别搜索',
            type: 'select',
            name: 'medium',
            show: pathname === '/marketingModule/promoter',
            select: {
                material: '素材',
                collect: '信息采集',
                goods: '商品',
                thirdGoods: '自主商品 ',
                thirdPoster: '自主海报 ',
                thirdMaterial: '自主素材 ',
            }
        },
    ];

    // table 表头
    const getColumns = [
        {
            title: '姓名',
            dataIndex: 'username',
        },
        {
            title: '手机号',
            dataIndex: 'mobile',
        },
        {
            title: '注册时间',
            dataIndex: 'addTime',
        },
        {
            title: '注册邀约人',
            dataIndex: 'promoterUsername',
        },
        {
            title: '意向方向',
            dataIndex: 'intentionDirectionNames',
        },
        {
            title: '消费次数',
            dataIndex: 'saleAmount',
        },
        {
            title: '消费金额',
            dataIndex: 'saleMoney',
        },
        {
            title: '免费下载量',
            dataIndex: 'freeDownloadAmount',
        },
        {
            title: '内容分享商品次数',
            dataIndex: 'shareGoodsAmount',
        },
        {
            title: '内容素材次数',
            dataIndex: 'shareMaterialAmount',
        },
        {
            title: '类别',
            dataIndex: 'medium',
            show: pathname === '/marketingModule/promoter' ? true : false,
            render: (e) => {
                return {
                    material: '素材',
                    collect: '信息采集',
                    goods: '商品',
                    thirdGoods: '自主商品 ',
                    thirdPoster: '自主海报 ',
                    thirdMaterial: '自主素材 ',
                }[e]
            }
        },
        {
            title: <div>
                来源详情 <span style={{ color: '#999999', fontSize: 12 }}>  </span>
            </div>,
            show: pathname === '/marketingModule/promoter' ? true : false,
            dataIndex: 'mediumName',
        },
        {
            title: '邀请用户数',
            dataIndex: 'inviteUserAmount',
        },
    ].filter(val => {
        const { show = true } = val
        return show
    });
    const handleCallback = () => {
        childRef.current.fetchGetData();
    };
    const handleSaveRole = (detail = {}) => {
        setVisible({
            show: true,
            detail,
        });
    };

    return (
        <div>
            <Row gutter={[36, 12]}>
                <Col span={24}>
                    <Space size={'large'}>
                        <Button type='primary' onClick={() => {
                            fakeExportPromoter();
                        }}>导出客户列表</Button>
                    </Space>
                </Col>
                <Col span={24}>
                    <div style={{ background: '#f5f5f5', padding: 24 }}>
                        <SearchCondition
                            handleSearch={(e) => {
                                setSearchParams(e);
                            }}
                            searchItems={searchItems}
                        ></SearchCondition>
                    </div>
                </Col>

                <Col span={24}>
                    <TableDataBlock
                        // rowSelection={selectedRow}
                        cRef={childRef}
                        loading={loading}
                        params={{
                            ...params, promoterId: id
                        }}
                        firstFetch={false}
                        columns={getColumns}
                        rowKey={(record) => `${record.id}`}
                        dispatchType="promoter/fetchUserListPromoterUser"
                        {...list}
                    ></TableDataBlock>
                </Col>

            </Row>
        </div>
    );
};

export default connect(({ promoter, loading }) => ({
    list: promoter.userInfoList,
    loading: loading.models.promoter,
}))(PromoterList);
